{% extends 'myhome/base.html' %}

    {% block title %}
    <title>bookshop-商品详情</title>
    {% endblock %}

    {% block con %}
    <!-- breadcrumbs-area-start -->
    <div class="breadcrumbs-area mb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumbs-menu">
                        <ul>
                            <li><a href="{% url 'myhome_index' %}">首页</a></li>
                            <li><a href="#" class="active">商品详情</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumbs-area-end -->
    <!-- product-main-area-start -->
    <div class="product-main-area mb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                    <!-- product-main-area-start -->
                    <div class="product-main-area">
                        <div class="row">
                            <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                                <div class="flexslider">
                                    <ul class="slides">
                                    {% for i in bookobj.bookimgs_set.all %}
                                        <li data-thumb="{{ i.img_url }}">
                                          <img src="{{ i.img_url }}" alt="woman" />
                                        </li>
                                    {% endfor %}
                                        <li data-thumb="/static/myhome/img/thum-2/4.jpg">
                                          <img src="/static/myhome/img/flex/1.jpg" alt="woman" />
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
                                <div class="product-info-main">
                                    <div class="page-title">
                                        <h3>{{ bookobj.title }}</h3>
                                    </div>
                                    <div class="product-social-links">
                                        <div class="product-addto-links-text">
                                            <p>{{ bookobj.subhead }}</p>
                                        </div>
                                        <div class="page-title">
                                            <p>作者：{{ bookobj.author }}</p>
                                        </div>
                                        <div class="page-title">
                                            <p>出版社：{{ bookobj.publisher }}，出版时间：{{ bookobj.pub_date }}</p>
                                        </div>
                                    </div>
                                    <div class="product-reviews-summary">
                                        <div class="rating-summary">
                                            <a href="#"><i class="fa fa-star"></i></a>
                                            <a href="#"><i class="fa fa-star"></i></a>
                                            <a href="#"><i class="fa fa-star"></i></a>
                                            <a href="#"><i class="fa fa-star"></i></a>
                                            <a href="#"><i class="fa fa-star"></i></a>
                                        </div>
                                        <div class="reviews-actions">
                                            <a href="#" class="view">添加评论</a>
                                        </div>
                                    </div>
                                    <div class="product-info-price">
                                        <div class="price-final">
                                            <span>￥{{ bookobj.price }}元</span>
                                        </div>
                                    </div>
                                    <div class="page-title">
                                        <p>库存：{{ bookobj.num }}</p>
                                    </div>
                                    <div class="product-add-form">
                                        <form action="#">
                                            <div class="quality-button">
                                                <input class="qty" name="num" type="number" value="1" min="1">
                                            </div>
                                            <a id="addcart" href="javascript:void(0);">加入购物车</a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- product-main-area-end -->
                    <!-- product-info-area-start -->
                    <div class="product-info-area mt-80">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="active"><a href="#Details" data-toggle="tab">详情</a></li>
                            <li><a href="#Reviews" data-toggle="tab">评价</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="Details">
                                <div class="valu">
                                  {{ bookobj.context }}
                                </div>
                            </div>
                            <div class="tab-pane" id="Reviews">
                                <div class="valu valu-2">
                                    <div class="section-title mb-60 mt-60">
                                        <h2>Customer Reviews</h2>
                                    </div>
                                    <ul>
                                        <li>
                                            <div class="review-title">
                                                <h3>themes</h3>
                                            </div>
                                            <div class="review-left">
                                                <div class="review-rating">
                                                    <span>Price</span>
                                                    <div class="rating-result">
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                    </div>
                                                </div>
                                                <div class="review-rating">
                                                    <span>Value</span>
                                                    <div class="rating-result">
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                    </div>
                                                </div>
                                                <div class="review-rating">
                                                    <span>Quality</span>
                                                    <div class="rating-result">
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                        <a href="#"><i class="fa fa-star"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="review-right">
                                                <div class="review-content">
                                                    <h4>themes </h4>
                                                </div>
                                                <div class="review-details">
                                                    <p class="review-author">Review by<a href="#">plaza</a></p>
                                                    <p class="review-date">Posted on <span>12/9/16</span></p>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="review-add">
                                        <h3>You're reviewing:</h3>
                                        <h4>Joust Duffle Bag</h4>
                                    </div>
                                    <div class="review-field-ratings">
                                        <span>Your Rating <sup>*</sup></span>
                                        <div class="control">
                                            <div class="single-control">
                                                <span>Value</span>
                                                <div class="review-control-vote">
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                </div>
                                            </div>
                                            <div class="single-control">
                                                <span>Quality</span>
                                                <div class="review-control-vote">
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                </div>
                                            </div>
                                            <div class="single-control">
                                                <span>Price</span>
                                                <div class="review-control-vote">
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="review-form">
                                        <div class="single-form">
                                            <label>Nickname <sup>*</sup></label>
                                            <form action="#">
                                                <input type="text" />
                                            </form>
                                        </div>
                                        <div class="single-form single-form-2">
                                            <label>Summary <sup>*</sup></label>
                                            <form action="#">
                                                <input type="text" />
                                            </form>
                                        </div>
                                        <div class="single-form">
                                            <label>Review <sup>*</sup></label>
                                            <form action="#">
                                                <textarea name="massage" cols="10" rows="4"></textarea>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="review-form-button">
                                        <a href="#">Submit Review</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- product-info-area-end -->
                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                    <div class="shop-left">
                        <div class="left-title mb-20">
                            <h4>同类书籍</h4>
                        </div>
                        <div class="random-area mb-30">
                            <div class="product-active-2 owl-carousel">
                                <div class="product-total-2">
                                {% for i in bookobj.classifyid.books_set.all %}
                                    {% if i.id != bookobj.id %}
                                    <div class="single-most-product bd mb-18">
                                        <div class="most-product-img">
                                            <a href="{% url 'myhome_bookdetails' i.id %}">
                                                <img src="{{ i.bookimgs_set.first.img_url }}" alt="book" />
                                            </a>
                                        </div>
                                        <div class="most-product-content">
                                            <div class="product-rating">
                                                <ul>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                </ul>
                                            </div>
                                            <h4><a href="{% url 'myhome_bookdetails' i.id %}">{{ i.title }}</a></h4>
                                            <div class="product-price">
                                                <ul>
                                                    <li>￥{{ i.price }}元</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    {% endif %}
                                {% endfor %}
                                </div>
                            </div>
                        </div>
                        <div class="banner-area mb-30">
                            <div class="banner-img-2">
                                <a href="#"><img src="/static/myhome/img/banner/33.jpg" alt="banner" /></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- product-main-area-end -->
    {% endblock %}

    {% block myjs %}
    <script>
        // 给加入购物车按钮绑定单击事件
        $('#addcart').click(function(){
            // 检测是否登陆
            var user = '{{ request.session.vipUser.id }}'
            if(user){
                // 已经登陆，获取当前商品id和num
                var data = {}
                data.bid = {{ bookobj.id }}
                data.num = $(this).parents('form').find('input[type=number]').val()
                // 发送ajax请求到后台，把数据添加到cart
                $.post('{% url "myhome_cartadd" %}',data,function(data){
                    console.log(data)
                    alert('加入购物车成功');
                },'json')
            }else{
                // 没有登陆
                alert('需要先登陆');
                location.href="{% url 'myhome_login' %}?nextpath={{ request.path }}"
            }
        })
    </script>
    {% endblock %}